<template>
  <div class="car_r">
    <w-breadcrumb style="font-size: 14px; margin-left: 5px" separator="/">
      <w-breadcrumb-item>车辆管理</w-breadcrumb-item>
      <w-breadcrumb-item>车辆列表</w-breadcrumb-item>
    </w-breadcrumb>
    <w-button
      class="add_car"
      size="mini"
      type="primary"
      @click="addFormVisible = true"
      >添加车辆</w-button
    >
    <w-dialog
      style="width: 800px; margin: 20px auto; text-align: center"
      title="车辆信息"
      :visible.sync="addFormVisible"
    >
      <w-form v-model="addCarList" class="car_form">
        <w-form-item label="车牌" :label-width="formLabelWidth">
          <w-input
            spellcheck="false"
            v-model="addCarList.license"
            class="car_input"
          ></w-input>
        </w-form-item>
        <w-form-item label="目前位置" :label-width="formLabelWidth">
          <w-input
            spellcheck="false"
            v-model="addCarList.location"
            class="car_input"
          ></w-input>
        </w-form-item>
      </w-form>
      <div slot="footer" class="dialog-footer">
        <w-button type="primary" @click="submitCar">提交添加</w-button>
      </div>
    </w-dialog>
    <div class="carList_table">
      <w-table
        class="car_table"
        ref="multipleTable"
        :data="
          carList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        tooltip-effect="dark"
        style="width: 100%"
      >
        <w-table-column prop="id" label="ID" width="130"> </w-table-column>
        <w-table-column prop="license" label="车牌" width="210">
        </w-table-column>
        <w-table-column
          prop="location"
          label="当前位置"
          width="160"
        ></w-table-column>
        <w-table-column
          prop="free"
          label="是否空闲"
          width="130"
        ></w-table-column>
        <w-table-column label="操作">
          <template slot-scope="scope">
            <w-button size="mini" @click="handleCarEdit(scope.row)"
              >编辑</w-button
            >

            <w-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)"
              >删除</w-button
            >
          </template>
        </w-table-column>
      </w-table>
    </div>
    <w-dialog
      style="width: 800px; margin: 20px auto; text-align: center"
      title="车辆信息"
      :visible.sync="dialogFormVisible"
    >
      <w-form v-model="carList" class="car_form">
        <w-form-item label="车牌" :label-width="formLabelWidth">
          <w-input spellcheck="false" v-model="selectedCar.license"></w-input>
        </w-form-item>
        <w-form-item label="当前位置" :label-width="formLabelWidth">
          <w-input spellcheck="false" v-model="selectedCar.location"></w-input>
        </w-form-item>
      </w-form>
      <div slot="footer" class="dialog-footer">
        <w-button type="primary" @click="submitFix(selectedCar.id)"
          >提交修改</w-button
        >
      </div>
    </w-dialog>
    <w-pagination
      class="car_bottom"
      @current-change="current_change"
      :current-page="currentPage"
      small
      background
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="carList.length"
    >
    </w-pagination>
  </div>
</template>

<script>
export default {
  name: "CarList",
  data() {
    return {
      currentPage: 1,
      pageSize: 6,
      carList: [],
      addCarList: {
        license: "",
        location: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "80px",
      selectedCar: {
        id: "",
        license: "",
        location: "",
      },
      addFormVisible: false,
    };
  },
  methods: {
    current_change(currentPage) {
      this.currentPage = currentPage;
    },
    handleDelete(index, id) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "GET",
            url: "http://1.15.170.222:88/api/manage/car/delete/" + id,
          }).then((response) => {
            console.log(response);
            this.msg = response.data.msg;
            if (this.msg === "success") {
              index += (this.currentPage - 1) * this.pageSize;
              var isLast = false;
              if (
                this.currentPage ===
                Math.ceil(this.carList.length / this.pageSize)
              ) {
                isLast = true;
              }
              this.carList.splice(index, 1);
              if (isLast && this.carList.length % this.pageSize === 0) {
                this.currentPage--;
              }
            } else if (this.code === 500) {
              this.$alert("服务器内部错误", "提示", {
                confirmButtonText: "确定",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCarEdit(row) {
      this.dialogFormVisible = true;
      this.selectedCar.id = row.id;
      this.selectedCar.license = row.license;
      this.selectedCar.location = row.location;
    },
    async submitCar() {
      const uid = localStorage.getItem("uid");
      if (this.addCarList.location != "" && this.addCarList.license != "") {
        await this.$axios({
          method: "POST",
          url: "http://1.15.170.222:88/api/manage/car/insert",
          data: {
            uid: uid,
            license: this.addCarList.license,
            location: this.addCarList.location,
          },
        }).then((response) => {
          console.log(response);
        });
        this.$axios({
          method: "GET",
          url: "http://1.15.170.222:88/api/manage/car/list",
        }).then((response) => {
          console.log(response);
          this.carList = response.data.data;
          let code = response.data.code;
          if(code === 500){
            this.$alert("服务器内部错误", "提示", {
              confirmButtonText: "确定",
            });
          }else {
            this.$alert("服务器内部错误", "提示", {
              confirmButtonText: "确定",
            });
          }
        });
        this.addFormVisible = false;
        this.addCarList = "";
      }else {
        this.$alert("请输入完整", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
    async submitFix(id) {
      const uid = localStorage.getItem("uid");
      await this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/manage/car/update",
        data: {
          id: id,
          uid: uid,
          license: this.selectedCar.license,
          location: this.selectedCar.location,
        },
      }).then((response) => {
        console.log(response);
      });
      this.dialogFormVisible = false;
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/manage/car/list",
      }).then((response) => {
        console.log(response);
        this.carList = response.data.data;
      });
    },
  },
  mounted() {
    this.$axios({
      method: "GET",
      url: "http://1.15.170.222:88/api/manage/car/list",
    }).then((response) => {
      console.log(response);
      this.carList = response.data.data;
      for (var i = 0; i < this.carList.length; i++) {
        if (this.carList[i].free === 1) {
          this.carList[i].free = "是";
        } else {
          this.carList[i].free = "否";
        }
      }
    });
  },
};
</script>

<style>
.car_r {
  padding-top: 40px;
  padding-left: 82px;
  display: flex;
  flex-direction: column;
  width: 1050px;
  height: 680px;
}
.car_table {
  margin-top: 30px;
  font-size: 14px;
  margin-bottom: 40px;
  margin-left: 30px;
  width: 700px;
}
.car_bottom {
  text-align: center;
}
.add_car {
  font-size: 13px;
  margin: 5px 0 0 860px;
  width: 100px;
}
.car_form {
  height: 160px;
  margin-right: 10px;
  padding: 20px 0;
}
.carList_table {
  width: 800px;
}
</style>
